<template>
    <div class="box">
        <el-form :label-position="right" label-width="120px" :model="personInfo">
            <el-form-item label="用户头像：">
                <img class="head_url" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt=""><br>
            </el-form-item>
            <el-form-item label="姓名：">
                姜姜
            </el-form-item>
            <el-form-item label="手机号：">
                15939043685
            </el-form-item>
            <el-form-item label="账号：">
                admin
            </el-form-item>
            <el-form-item label="账号密码：">
                123456  <span @click="putPassword">修改密码</span>
            </el-form-item>
            <el-form-item label="所属部门：">
                产研部
            </el-form-item>
            <el-form-item label="管理员：">
                管理员
            </el-form-item>
        </el-form>
        <el-dialog center :close-on-click-modal="false" width="636px" height="300px" top="16%" :visible.sync="newVisible">
            <template slot="title">
                <div class="dialog_title" style="font-size: 16px;font-family: PingFang SC-Medium, PingFang SC;font-weight: 500;color: #000000;">
                    修改密码
                </div>
            </template>
            <el-form :label-position="right" label-width="130px" :model="gunInfoForm">
                <el-form-item prop="real_pay" label="输入新密码：" >
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                         <el-input style="width: 423px;" v-model="gunInfoForm" autocomplete="off" placeholder="请输入新密码"></el-input>
                    </span>
                </el-form-item>
                <el-form-item prop="real_pay" label="再次输入新密码：" >
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                         <el-input style="width: 423px;" v-model="gunInfoForm" autocomplete="off" placeholder="请再次输入新密码"></el-input>
                    </span>
                </el-form-item>
            </el-form>
                <div class="footer">
                        <el-button class="cancel" @click="newVisible = false">取消</el-button>
                        <el-button class="confirm" @click="submitForm('ruleForm')">确定</el-button>
                </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                personInfo:{},
                newVisible:true
            }
        },
        methods: {
            putPassword(){
                this.newVisible = true
            }
        },
    }
</script>

<style lang="less" scoped>
.box{
    text-align: left;
}
.head_url{
    width: 70px;
    height: 70px;
    border-radius: 70px;
}
span{
    display: inline-block;
    margin-left: 15px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #165BFF;
    line-height: 14px;
    cursor: pointer;
}

.footer{
    margin-left: 23px;
    text-align: left;
}
.cancel,.confirm{
    width: 140px;
    height: 44px;
    font-size: 16px;
    padding: 14px 54px;
    line-height: 0;
}
.cancel{
    width: 140px;
    height: 44px;
    margin-top: 5px;
    font-weight: 600;
    margin-left: 122px;
    line-height: 0;
}
.confirm{
    background: #165bff;
    color: white;
    border: 0;
}

</style>


<style>
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #f32823 !important;
  background-color: #f32823 !important;
}
.el-checkbox__inner:hover {
  border-color: #f32823 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #f32823 !important;
}
.el-checkbox {
  color: #111;
  margin-right: 30px;
  font-size: 16px;
  margin-bottom: 18px;
}
.el-checkbox__inner {
  width: 16px;
  height: 16px;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #111 !important;
}
.el-checkbox__inner::after {
  left: 4px;
  height: 9px;
  width: 5px;
  top: 0;
}
.bbb{
    background: white;
}
.bottom_box{
    width: 100%;
    padding-top: 24px;
    background: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
}
</style>